<template>
  <div id="menu">
    <el-row class="tac">
      <el-col>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" :router="true"
          @close="handleClose">
          <el-menu-item-group v-for="menu  in  menuList" :index="menu.path" :key="menu.name" :disabled="menu.disabled">
            <template slot="title">{{ menu.title }}</template>
            <el-menu-item v-for="menuSon in menu.children" :key="menuSon.name" :index="menuSon.path"
              :disabled="menuSon.disabled">
              {{ menuSon.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      activeIndex: 'Business',
      menuList: [
        {
          name: 'Channel',//对应index
          title: '渠道管理',
          disabled: true,
          children: [{
            name: 'Channel',//对应index
            title: '渠道管理',
            path: '/Settings/Channel',
            disabled: true,
          }]
        },
        {
          name: 'Accommodation',//对应index
          title: '住宿设置',
          // path: '/Settings/Accommodation',
          disabled: true,
          children: [{
            name: 'RoomTypeSetting',//对应index
            title: '房型房间设置',
            path: '/Settings/RoomTypeSetting',
          },
          {
            name: 'RoomGroupingSetting',//对应index
            title: '房间分组设置',
            path: '/Settings/RoomGroupingSetting',
          },
          {
            name: 'SortingSetting',//对应index
            title: '排序设置',
            path: '/Settings/SortingSetting',
          },
          {
            name: 'ConsumptionSetting',//对应index
            title: '消费项设置',
            path: '/Settings/ConsumptionSetting',
          },
          ]
        },
        {
          name: 'RoomPriceSetting',//对应index
          title: '房价设置',
          disabled: true,
          children: [
            {
              name: 'RoomPriceSetting',//对应index
              title: '房价管理',
              path: '/Settings/RoomPriceSetting',
            },
            {
              name: 'HourRoomSetting',//对应index
              title: '钟点房设置',
              path: '/Settings/HourRoomSetting',
            },
            {
              name: 'BatchSetting',//对应index
              title: '批量设置',
              path: '/Settings/BatchSetting',
            },
            {
              name: 'PriceChangeRecordSetting',//对应index
              title: '改价记录',
              path: '/Settings/PriceChangeRecordSetting',
            },
          ]
        },
        // 超市设置
        {
          name: 'Supermarket',//对应index
          title: '超市设置',
          disabled: true,
          children: [
            {
              name: 'GoodsManagement',//对应index
              title: '商品管理',
              path: '/Settings/GoodsManagement',
            },
            {
              name: 'SupermarketSetting',//对应index
              title: '商超设置',
              path: '/Settings/SupermarketSetting',
            },
            {
              name: 'CategoryManagement',//对应index
              title: '类目管理',
              path: '/Settings/CategoryManagement',
            },
            {
              name: 'StockManagement',//对应index
              title: '库存管理',
              path: '/Settings/StockManagement',
            },
            {
              name: 'Stockrecords',//对应index
              title: '库存记录',
              path: '/Settings/Stockrecords',
            },
          ]
        },


        {
          name: 'AccountManage',//对应index
          title: '账户管理',
          disabled: true,
          // path: '/Settings/AccountManage',
          children: [
            {
              name: 'ListAccount',//对应index
              title: '账号列表',
              path: '/Settings/ListAccount',
            },
          ]
        },
        {
          name: 'APP',//对应index
          title: '微信小程序',
          disabled: true,
          // path: '/Settings/AccountManage',
          children: [
            {
              name: 'HousingResource',//对应index
              title: '房源设置',
              path: '/Settings/HousingResource',
            },
            {
              name: '',//对应index
              title: '押金设置',
              path: '/Settings/CashPledge',
            },
          ]
        },
        // {
        //   name: 'MessagesManage',//对应index
        //   title: '短信管理',
        //   // path: '/Settings/MessagesManage',
        //   disabled: true,
        //   children: [
        //     {
        //       name: 'MessagesBalance',//对应index
        //       title: '短信余额',
        //       path: '/Settings/MessagesBalance',
        //     },
        //     {
        //       name: 'AutoMessages',//对应index
        //       title: '自动短信',
        //       path: '/Settings/AutoMessages',
        //     },
        //     {
        //       name: 'SendMessages',//对应index
        //       title: '发送短信',
        //       path: '/Settings/SendMessages',
        //     },
        //   ]
        // },

        {
          name: 'FinanceSetting',//对应index
          title: '财务设置',
          path: '/Settings/FinanceSetting',
          disabled: true,
          children: [
            {
              name: ' PaymentMethodSetting',//对应index
              title: '收款方式设置',
              path: '/Settings/PaymentMethodSetting',
            },
            {
              name: 'MakeAbill',//对应index
              title: '记一笔设置',
              path: '/Settings/MakeAbill',
            }
          ]
        },
        {
          name: 'current',//对应index
          title: '通用设置',
          path: '/Settings/FinanceSetting',
          disabled: true,
          children: [
            {
              name: 'notifications',//对应index
              title: '通知设置',
              path: '/Settings/notifications',
            }
          ]
        },
        
        {
          title: '门店管理',
          disabled: true,
          children: [
            {
              name: ' RoomType',//对应index
              title: '房型设置',
              path: '/Settings/RoomType',
            },
            {
              name: 'Branch_Information',
              title: '门店信息',
              path: '/Settings/BranchInformation',
            }
          ]
        },

      ]

    }
  },
  methods: {
    clickMenu() {
      console.log("点击了");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  }
}
</script>

<style lang="scss" scoped>
#div-nav::-webkit-scrollbar {
  display: none;
}

* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}

.el-menu-item-group {
  ul {
    li {
      padding-left: 10px;
    }
  }
}

::v-deep .is-active {
  margin-left: 0px !important;
  padding-left: 25px !important;
  border-left: 6px solid !important;
  border-left-color: #0486fe !important;
  background-color: #f6f8ff;
}

.tac {
  .el-menu {
    position: flex;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
}

#menu {
  width: 150px;
  height: 100%;
  background-color: white;
  overflow: auto;
 
}
/* 隐藏滚动条 */
#menu::-webkit-scrollbar {
  width: 0em; /* 设置滚动条宽度为0em */
}

// /* 滚动条轨道 */
// #menu::-webkit-scrollbar-track {
//   background-color: transparent; /* 设置滚动条轨道背景色 */
// }

// /* 滚动条 */
// #menu::-webkit-scrollbar-thumb {
//   background-color: transparent; /* 设置滚动条颜色 */
// }
</style>